<style>

</style>
<template>
    <Form ref="questions" :model="questions" :label-width="100" label-position="right" :rules="rule">
        <FormItem label="题目" prop="question">
            <Input v-model="questions.question" type="textarea" :rows="4" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="题目类型" prop="question_type">
            <Select v-model="questions.question_type">
                <Option v-for="item in typeList" :value="item.id" :key="item.id">{{item.name}}</Option>
            </Select>
        </FormItem>
        <FormItem label="选项A" prop="choice_a" v-if="questions.question_type != 3">
            <Input v-model="questions.choice_a" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="选项B" prop="choice_b" v-if="questions.question_type != 3">
            <Input v-model="questions.choice_b" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="选项C" prop="choice_c" v-if="questions.question_type != 3">
            <Input v-model="questions.choice_c" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="选项D" prop="choice_d" v-if="questions.question_type != 3">
            <Input v-model="questions.choice_d" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="正确答案" prop="correct_answer">
            <Input v-model="questions.correct_answer" placeholder="请根据答案输入ABCD;多选题请用','隔开;判断题0为错误,1为正确"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('questions')">确认</Button>
            <Button type="ghost" @click="handleReset('questions')" style="margin-left: 10px">重置</Button>
        </FormItem>
    </Form>
</template>
<script>
import http from '../../../libs/http';
export default {
    data() {
        return {
            typeList: [
                {id:1, name:"单选题"},
                {id:2, name:"多选题"},
                {id:3, name:"判断题"}
            ],
            questions: {},
            rule:{
                question_type: [{type:'number',required: true, message: '请选择题目类型', trigger: 'change'}],
                question: [{required: true, message: '问题不能为空', trigger: 'blur'}],
                correct_answer: [{required: true, message: '正确答案不能为空', trigger: 'blur'}]
            }
        }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    //提交后台
                    var data = {
                        question_type: this.questions.question_type,
                        question: this.questions.question,
                        choice_a: this.questions.choice_a,
                        choice_b: this.questions.choice_b,
                        choice_c: this.questions.choice_c,
                        choice_d: this.questions.choice_d,
                        correct_answer: this.questions.correct_answer
                    }
                    var url = 'admin/test/question/save/';
                    this.apiPost(url, data).then((res) => {
                        if (res.code != 200) {
                            this.handleError(res);
                        } else {
                            this.$Message.success('添加成功');
                            this.handleReset(name);
                            this.$emit('closeAdd');
                        }
                    })
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        }
    },
    mixins: [http]
}
</script>
